<template>
    <div class="box">
        <details-header></details-header>
        <details-banner :list="bannerList"></details-banner>
        <details-price></details-price>
        <details-discount></details-discount>
    </div>
</template>

<script>
import DetailsHeader from './components/Header'
import DetailsBanner from './components/Banner'
import DetailsPrice from './components/Price'
import DetailsDiscount from './components/Discount'
import axios from "axios"
    export default{
        name:"Details",
        components:{
            DetailsHeader,
            DetailsBanner,
            DetailsPrice,
            DetailsDiscount
        },
        data(){
            return{
               bannerList:[]
            }
        },
        methods:{
            getHomeInfo(){
                axios.get("/static/mock/details.json")
                    .then(this.getHomeInfoSucc)
            },
            getHomeInfoSucc(res){
                // console.log(res)
                res = res.data
                if(res.ret && res.data){
                    this.bannerList = res.data.banner
                }
            }
        },
        mounted(){
            this.getHomeInfo()
        }
    }
</script>

<style lang="stylus" scoped>
.box
    width 3.75rem
    height 6.75rem
    background-color #eee
</style>

